<template>
	<view class="MyBalance"> 
	<view class="navHead" :style="{'padding-top':statusH+'px'}">
		<view class="navHeadCon">
			<image src="../../static/index/back.png" class="back" @click="back"></image>
			<view class="navTit">我的余额</view>
<!--			<view class="allChoice" @click="toExport">-->
<!--				<image src="../../static/mine/export.png"></image>-->
<!--				<view>导出</view>-->
<!--			</view>-->
		</view>
	</view>
	<view class="emptyBox" :style="{'padding-top':statusH+'px'}"></view>
		<view class="MyBalanceBox">
			<view class="MyBalance_TOP">
				<view class="BalanceNum">￥<span style="font-size: 56upx;">{{userMsg.allMoney?userMsg.allMoney:0}}</span></view>
				<view style="display: flex;justify-content: center;align-items: center;">
					<text style="font-size: 24upx;line-height: 24upx;color: #D0D0D0;">可用{{userMsg.money?userMsg.money:0}}</text>
					<text style="margin-left: 30upx;font-size: 24upx;line-height: 24upx;color: #D0D0D0;">冻结{{userMsg.frozen_money?userMsg.frozen_money:0}}</text>
				</view>
				<!-- <view class="capitalBox" @click="toFundRecord">
					<view class="capitalName">资金记录</view>
					<u-icon name="arrow-right" color="#D0D0D0" size="25"></u-icon>
				</view> -->
				<view class="btnBox">
					<view class="BtnItem" @click="toWithdrawal">提现</view>
					<view class="BtnItem2" @click="toRecharge">充值</view>
				</view>
			</view>
			<view class="detailedBox">
				<view class="detailedtitle">余额明细</view>
				<view class="detailedList">
					<view class="detailedItem" v-for="(item,index) in list" :key="index" @click="todetailedDetail">
						<view class="detailed_L">
							<view class="detailedName">{{item.annotation}}</view>
							<view class="times">{{item.create_time|getTime}}</view>
						</view>
						<view class="detailed_R">
							<view class="priceNum" v-if="item.type==6">
								<view>充值{{item.income_money}}</view>
								<view style="display: flex;align-items: center;margin-top: 24upx;">
									<view style="font-size: 20upx;margin-right: 20upx;">可用余额{{item.money}}</view>
									<view style="font-size: 20upx;">冻结余额{{item.frozen_money_sum}}</view>
								</view>
							</view>
							<view class="priceNum" v-if="item.type==5">
								<view>提现{{item.expenditure_money}}</view>
								<view style="display: flex;align-items: center;margin-top: 24upx;">
									<view style="font-size: 20upx;margin-right: 20upx;">可用余额{{item.money}}</view>
									<view style="font-size: 20upx;">冻结余额{{item.frozen_money_sum}}</view>
								</view>
							</view>
							<view class="priceNum" v-if="item.type==1||item.type==2">
								<view v-if="item.annotation=='用户微信支付团购订单'||item.annotation=='用户支付宝支付团购订单'||item.annotation=='商家支付宝支付测评订单'||item.annotation=='商家微信支付测评订单'">{{item.expenditure_money}}</view>
								<view v-else>支出{{item.expenditure_money}}</view>
								<view style="display: flex;align-items: center;margin-top: 24upx;">
									<view style="font-size: 20upx;margin-right: 20upx;">可用余额{{item.money}}</view>
									<view style="font-size: 20upx;">冻结余额{{item.frozen_money_sum}}</view>
								</view>
							</view>
							<view class="priceNum" v-if="item.type==7||item.type==8||item.type==12||item.type==11||item.type==14||item.type==13||item.type==15">
								<view>收入{{item.income_money}}</view>
								<view style="display: flex;align-items: center;margin-top: 24upx;">
									<view style="font-size: 20upx;margin-right: 20upx;">可用余额{{item.money}}</view>
									<view style="font-size: 20upx;">冻结余额{{item.frozen_money_sum}}</view>
								</view>
							</view>
							<view class="priceNum" v-if="item.type==3">
								<view>余额冻结{{item.frozen_money}}</view>
								<view style="display: flex;align-items: center;margin-top: 24upx;">
									<view style="font-size: 20upx;margin-right: 20upx;">可用余额{{item.money}}</view>
									<view style="font-size: 20upx;">冻结余额{{item.frozen_money_sum}}</view>
								</view>
							</view>
							<view class="priceNum" v-if="item.type==4||item.type==10">
								<view>余额解冻{{item.income_money}}</view>
								<view style="display: flex;align-items: center;margin-top: 24upx;">
									<view style="font-size: 20upx;margin-right: 20upx;">可用余额{{item.money}}</view>
									<view style="font-size: 20upx;">冻结余额{{item.frozen_money_sum}}</view>
								</view>
							</view>
							<view class="priceNum" v-if="item.type==9||item.type==16||item.type==17">
								<view>收入冻结{{item.frozen_money}}</view>
								<view style="display: flex;align-items: center;margin-top: 24upx;">
									<view style="font-size: 20upx;margin-right: 20upx;">可用余额{{item.money}}</view>
									<view style="font-size: 20upx;">冻结余额{{item.frozen_money_sum}}</view>
								</view>
							</view>
							<!-- <view class="priceNum">冻结{{item.frozen_money}}</view>
							<view class="priceNum">解冻{{item.thaw_money}}</view> -->
							<!-- <u-icon name="arrow-right" color="#D0D0D0" size="25"></u-icon> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				userMsg:{},
				statusH:0,
				list:[],
				page:1,
				moreFlag:false
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		onLoad() {
			uni.getSystemInfo({
				success:res=>{
					this.statusH = res.statusBarHeight;
				}
			})
			this.getMsg();
			this.getList();
		},
		methods: {
			toWithdrawal(){
				// #ifdef MP-WEIXIN
				uni.showModal({
					content:"因系统限制，提现功能请至app版本。后续版本中我们将优化这一功能，敬请期待!"
				})
				// uni.navigateTo({
				// 	url:"/pages/pagefive/pages/withdrawal/withdrawal"
				// })
				// #endif
				// #ifdef APP
				uni.navigateTo({
					url:"/pages/pagefive/pages/withdrawal/withdrawal"
				})
				
				// #endif
			},
			getList(){
				let obj = {};
				obj.page = this.page;
				obj.user_id = uni.getStorageSync("userId");
				this.$u.api.userMoneyLog(obj).then(res=>{
					//console.log(res)
					if(this.page == 1){
						this.list = res.list.data;
					}else{
						this.list = this.list.concat(res.list.data);
					}
					if(this.page < res.total){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toExport(){
				uni.navigateTo({
					url:"/pages/pagetwo/pages/exportGroup/exportGroup?type=zj"
				})
			},
			getMsg(){
				this.$u.api.userDetails({user_id:uni.getStorageSync("userId")}).then(res=>{
					//console.log(res)
					res.data.allMoney = (Number(res.data.money) + Number(res.data.frozen_money)).toFixed(2);
					this.userMsg = res.data;
				})
			},
			//充值
			toRecharge(){
				uni.navigateTo({
					url:"/pages/pagefour/pages/Recharge/Recharge"
				})
			},
			//明细详情
			todetailedDetail(){
				return false;
				uni.navigateTo({
					url:"/pages/pagetwo/pages/detailedDetail/detailedDetail"
				})
			},
			//资金记录
			toFundRecord(){
				uni.navigateTo({
					url:"/pages/pagetwo/pages/FundRecord/FundRecord"
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.emptyBox{
		width: 100%;
		height: 88upx;
		box-sizing: content-box;
	}
	.navHead{
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		background: white;
		z-index: 999;
	}
	.navHeadCon{
		width: 100%;
		height: 88upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.back{
		width: 48upx;
		height: 48upx;
		position: absolute;
		left: 24upx;
		top: 50%;
		transform: translateY(-50%);
	}
	.navTit{
		font-size: 28upx;
		color: #333333;
		line-height: 88upx;
		text-align: center;
	}
	.allChoice{
		position: absolute;
		right: 32upx;
		height: 88upx;
		top: 0;
		display: flex;
		align-items: center;
	}
	.allChoice>view{
		font-size: 28upx;
		line-height: 88upx;
		color: #333333;
	}
	.allChoice>image{
		width: 28upx;
		height: 28upx;
		margin-right: 6upx;
	}
	
	
.MyBalance{
	background-color: #F3F3F3;
	min-height: 100vh;
	// overflow: auto;
	.MyBalanceBox{
		padding: 16upx 24upx;
		.MyBalance_TOP{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 702upx;
			height: 364upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 8upx;
			padding: 32upx 47upx;
			.BalanceNum{
				font-size: 28upx;
				color: #333333;
				font-weight: bold;
			}
			.capitalBox{
				display: flex;
				align-items: center;
				.capitalName{
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #D0D0D0;
					// margin-right: upx;
				}
			}
			.btnBox{
				display: flex;
				// justify-content: space-between;
				align-items: center;
			}
			.BtnItem{
				width: 280upx;
				height: 92upx;
				background: #EEEEEE;
				opacity: 1;
				border-radius: 46upx;
				text-align: center;
				line-height: 92upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-right: 48upx;
			}
			.BtnItem2{
				width: 280upx;
				height: 92upx;
				background: #FFAC3F;
				opacity: 1;
				border-radius: 46upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 92upx;
			}
		}
		.detailedBox{
			width: 702upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 8upx;
			margin-top: 16upx;
			.detailedtitle{
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				padding: 24upx;
				border-bottom: 2upx solid #F5F5F5;
			}
			.detailedList{
				padding: 0 24upx;
				.detailedItem{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 32upx 0;
					border-bottom: 2upx solid #F5F5F5;
					.detailed_L{
						.detailedName{
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
						.times{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #D0D0D0;
							margin-top: 24upx;
						}
					}
					.detailed_R{
						display: flex;
						align-items: center;
						.priceNum{
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
							margin-right: 4upx;
							view{
								text-align: right;
							}
						}
					}
				}
			}
		}
	}
}
</style>
